<template>
    <div>
        <el-card style="height: 100%">
            <process-designer
                    v-if="init"
                    ref="workflowModel"
                    :modelData="model"
                    @save="saveModel"
                    @saveNew="saveModelNew"
                    @back="goBack"
            />
        </el-card>
    </div>

</template>

<script>
    import ProcessDesigner from '@/components/ProcessDesigner'
    import {getModel, saveModel} from '@/api/app/workflow/model'
    import Bus from '@/utils/bus'

    export default {
        name: "Model",
        components: {
            ProcessDesigner,
        },
        data() {
            return {
                model: {
                    id: null,
                    modelKey: null,
                    modelName: null,
                    category: null,
                    version: null,
                    bpmnXml: null
                },
                init: false
            }
        },
        beforeRouteLeave(to, from, next) {
            // 在导航离开渲染该组件的对应路由时调用
            this.$confirm('是否确认离开流程设计页面?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                next()
            }).catch(() => {
                Bus.$emit('activeIndex', from.path)
            })
        },
        async created() {
            this.model.id = this.$route.query.modelId
            await this.getModel()
            this.init = true
        },
        methods: {
            async getModel() {
                if (this.model.id) {
                    await getModel(this.model.id).then(res => {
                        this.model = res.data
                    })
                }
            },
            saveModel(bpmnXml) {
                this.model.bpmnXml = bpmnXml
                this.model.newVersion = false
                saveModel(this.model).then(res => {
                    this.msgSuccess('保存成功')
                    this.$router.push({path: '/workflow-model', query: {modelId: res.msg}})
                })
            },
            saveModelNew(bpmnXml) {
                this.model.bpmnXml = bpmnXml
                this.model.newVersion = true
                saveModel(this.model).then(res => {
                    this.msgSuccess('新版保存成功')
                    this.$router.push({path: '/workflow-model', query: {modelId: res.msg}})
                })
            },
            goBack() {
                this.$router.push({path: '/workflow-define'})
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep {
        .el-card__body {
            padding: 0;
            height: 100%;
        }
    }
</style>
